<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>模板</title>
    <style type="text/css">
      :root {
        --box-width: 440px;
        --box-height: fit-content;
      }
      /* 书写区 */

      .demo {
        height: 100px;
        width: 100px;
        background: brown;

        border-width: 100px;
        border-style: solid;
        border-image: url(../../Source/border-image.png) 300;
      }
      .case1 {
        border-image-slice: 100 200 300 400;
      }
      .case2 {
        border-image-width: 0.5;
      }
      .case3 {
        border-image-outset: 100px;
      }
      .case4 {
        border-image-slice: 200;

        border-image-repeat: space;
      }
    </style>
  </head>
  <body>
    <a href="./3-新的尺寸单位.html">上一篇</a>
    <a href="./5-position属性增强.html">下一篇</a>
    <br />
    <div class="demo-box">
      <dl>
        <dt>基础使用（红色区域为dom内容）</dt>
        <dd>
          <div class="demo">内容</div>
        </dd>
        <dd>
          <pre><code class="language-scss">
    border-width: 100px;
    border-style: solid;
    border-image: url(../../Source/border-image.png) 300;
          </code></pre>
        </dd>
      </dl>
      <dl>
        <dt>切割原图，会自动拉伸补满。顺时针</dt>
        <dd>
          <div class="demo case1">内容</div>
        </dd>
        <dd>
          <pre><code class="language-scss">
    border-image-slice: 100 200 300 400;
            </code></pre>
        </dd>
      </dl>
      <dl>
        <dt>border-image-width</dt>
        <dd>
          1、宽度（px这些），则覆盖border-width（为0时除外）
          <br />
          2、纯数值，与border-width相乘
        </dd>
        <dd>
          <div class="demo case2">内容</div>
        </dd>
        <dd>
          <pre><code class="language-scss">
    border-image-width: 0.5;
            </code></pre>
        </dd>
      </dl>
      <dl>
        <dt>border-image-outset</dt>
        <dd>
          1、向外扩张，不能为负
          <br />
          ps:不改变文档流，类似outline
        </dd>
        <dd>
          <div class="demo case3">内容</div>
        </dd>
        <dd>
          <pre><code class="language-scss">
    border-image-outset: 100px;
            </code></pre>
        </dd>
      </dl>
      <dl>
        <dt>border-image-repeat</dt>
        <dd>
          stretch（默认值，拉伸）
          <br />
          repeat（紧密平铺，原比例）
          <br />
          round（平铺，适当伸缩，不会在边界截断）
          <br />
          space（平铺，适当保持间隙，不会在边界截断）
        </dd>
        <dd>
          <div class="demo case4">内容</div>
        </dd>
        <dd>
          <pre><code class="language-scss">
    border-image-slice: 200; // 让画面更明显
    border-image-repeat: space;
            </code></pre>
        </dd>
      </dl>
    </div>
    <link rel="stylesheet" href="./0-模板.css" />
    <link
      rel="stylesheet"
      href="../../Module/hightlight/styles/hybrid.min.css"
    />
    <script src="../../Module/hightlight/highlight.min.js"></script>
    <script>
      hljs.highlightAll()
    </script>
  </body>
</html>
